<template>
  <div class="container">
    <el-dialog
      title="上传凭证"
      :visible.sync="dialog.centerDialogVisible"
      width="600px"
      center
      @close="hideDialog"
      @open="getData"
      :lock-scroll="true"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="收款凭证：">
          <div class="annex">
            <el-upload
              class="upload-demo"
              style="display: inline; margin-left: 10px"
              action="#"
              :show-file-list="false"
              :http-request="addImg"
            >
              <el-image
                style="
                  width: 115px;
                  height: 115px;
                  margin-left: 10px;
                  background: #eee;
                  text-align: center;
                  line-height: 115px;
                  display: block;
                "
                :src="formData.imgUrl"
                fit="cover"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <el-button
                size="mini"
                type="primary"
                class="handleSearch"
                icon="el-icon-circle-plus"
                >上传图片</el-button
              >
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
import { subNoCheckInfo } from "@/api/returnGoods/returnGoods";
export default {
  props: {
    dialog: Object,
  },
  data() {
    return {
      formData: {
        imgUrl: "",
        annex: "",
      },
    };
  },

  methods: {
    hideDialog() {
      this.dialog.centerDialogVisible = false;
      this.formData = {
        imgUrl: "",
        annex: "",
      };
    },
    //获取数据
    getData() {
    },
    //上传附件
    addImg(param) {
      let loading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
      });
      let data = new window.FormData();
      data.append("filename", param.file);
      data.append("token", getToken());
      this.$axios.post("/smkapi/FileManage/upload", data).then((res) => {
        loading.close();
        if (res.data.code == 0) {
          this.formData.annex = res.data.data.file_path;
          this.formData.imgUrl = this.imgHttp + res.data.data.file_path;
          console.log(this.formData.annex);
        } else {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        }
      });
    },
    //提交
    confirm() {
      let data = {
        bill_id: this.dialog.id,
        file_path: this.formData.annex,
      };
      subNoCheckInfo(data)
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.hideDialog();
            // this.$emit("upData");
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //取消
    cancel() {
      this.hideDialog();
    },
  },
};
</script>